var canvas, context, canvasWidth = 490, canvasHeight = 220, images = {}, frameInterval, fps = 30, drawing = false, fpsInterval, numFramesDrawn = 0, curFPS = 0, level = 1, maxLevel = 6, speed = 15, curLoadResNum = 0, totalLoadResources = 1, displayList = [], ball, hero, background;

Ball = function() {

	var x = 0, y = 0, speed = 0, direction = 1, rollTimer, dirty = false, diameter = 20, color = "#DD3333", highlightColor = "#fa6565";

	rollTimer = setInterval(updateRoll, 1000 / 25);

	function roll(pSpeed, pDirection) {
		speed = pSpeed;
		if (pDirection) {
			direction = pDirection;
		}

	}

	function stop() {
		speed = 0;
	}

	function updateRoll() {
		x += direction * speed;
	}

	function draw(context) {

		var centerX = x, centerY = y + (diameter + 10) / 2 - 2, width = (diameter + 30), height = 6;

		context.beginPath();
		context.moveTo(centerX, centerY);
		context.bezierCurveTo(centerX - width / 2, centerY - height / 2, centerX - width / 2, centerY + height / 2, centerX, centerY + height / 2);
		context.bezierCurveTo(centerX + width / 2, centerY + height / 2, centerX + width / 2, centerY - height / 2, centerX, centerY - height / 2);
		context.fillStyle = "#000000";
		context.fill();
		context.closePath();

		context.beginPath();
		context.moveTo(x, y - (diameter + 10) / 2);
		context.arc(x, y, (diameter + 10) / 2, 0, 2 * Math.PI, false);
		context.fillStyle = "#000000";
		context.fill();
		context.closePath();

		context.beginPath();
		context.moveTo(x, y - diameter / 2);
		context.arc(x, y, diameter / 2, 0, 2 * Math.PI, false);
		context.fillStyle = color;
		context.fill();
		context.closePath();

		centerX = x + 3;
		centerY = y - 3;
		context.beginPath();
		context.moveTo(centerX, centerY);
		context.arc(centerX, centerY, diameter / 3 / 2, 0, 2 * Math.PI, false);
		context.fillStyle = highlightColor;
		context.fill();
		context.closePath();
	}

	function getX() {
		return x;
	}

	function setX(pX) {
		x = pX;
	}

	function getY() {
		return y;
	}

	function setY(pY) {
		y = pY;
	}

	return {
		getX : getX,
		setX : setX,
		getY : getY,
		setY : setY,
		roll : roll,
		draw : draw,
		stop : stop
	};
};

function throwBall() {
	ball.roll(speed, -1);
}

function start() {
	frameInterval = setInterval(update, 1000 / fps);
	fpsInterval = setInterval(updateFPS, 1000);
}

function prepareCanvas(gameDiv, pCanvasWidth, pCanvasHeight) {

	canvasWidth = pCanvasWidth;
	canvasHeight = pCanvasHeight;

	// Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
	canvas = document.createElement('canvas');
	canvas.setAttribute('width', canvasWidth);
	canvas.setAttribute('height', canvasHeight);
	canvas.setAttribute('id', 'canvas');
	gameDiv.appendChild(canvas);

	/*if(typeof G_vmlCanvasManager != 'undefined') {
	 canvas = G_vmlCanvasManager.initElement(canvas);
	 }*/
	context = canvas.getContext("2d");
	// Grab the 2d canvas context
	// Note: The above code is a workaround for IE 8 and lower. Otherwise we could have used:
	//     context = document.getElementById('canvas').getContext("2d");

	start();

	ball = new Ball();
	ball.setX(canvasWidth);
	ball.setY(200);
	ball.roll(speed, -1);
	displayList.push(ball);
}

function clearCanvas() {
	canvas.width = canvas.width;
	// clears the canvas
}

function update() {++numFramesDrawn;

	if (ball.getX() < 0) {

		speed = Math.random()*50;
		level += 1;

		ball.stop();
		ball.setX(canvasWidth + 20);
		setTimeout(throwBall, Math.random() * 3000);
	} else {
		ball.roll(speed, -1);
	}
	redraw();
}

function redraw() {

	var i;

	clearCanvas();

	for ( i = 0; i < displayList.length; i++) {
		displayList[i].draw(context);
	}

	try {

	} catch (ex) {

	}

}

function updateFPS() {
	curFPS = numFramesDrawn;
	numFramesDrawn = 0;
}
